<template>
    <div>
        <el-container style="height: 100vh;">
            <el-aside :width="sideWidth + 'px'"
                style="background-color: rgb(238, 241, 246);height:100%;box-shadow:1px 0 6px rgb(73, 73, 73);">
                <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
            </el-aside>

            <el-container>
                <el-header style="border-bottom:#ccc 1px solid;">
                    <Header :collapse="isCollapse" :collapseBtnClass="collapseBtnClass" />
                </el-header>

                <el-main>
                    <!-- 右边展示区：当前页面上的子路由会在routeview展示 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Aside from "@/components/Aside.vue"
import Header from "@/components/Header.vue"

export default {
    name: 'Home',
    components:{ Aside , Header },
    data() {

        return {
            // 折叠状态
            isCollapse: false,
            
            collapseBtnClass: 'el-icon-s-fold',
            
            // sideWidth
            sideWidth: 200,

            // 标题文字收缩
            logoTextShow: true,
        };
    },
    mounted() {
    },
    methods: {
        
        // 收缩
        collapse() {
            this.isCollapse = !this.isCollapse
            if (this.isCollapse) {
                this.sideWidth = 64
                this.collapseBtnClass = "el-icon-s-unfold"
                this.logoTextShow = false
            } else {
                this.sideWidth = 200
                this.collapseBtnClass = "el-icon-s-fold"
                this.logoTextShow = true
            }
        }
    }
}
</script>

<style>
::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}
</style>